<template>
  <div id="mine">
    <div class="header">
      <img :src="user.avatarUrl" alt class="img" />
      <p class="user-name">{{user.nickName}}</p>
    </div>
    <van-grid :column-num="3">
      <van-grid-item icon="photo-o" text="我的订单" />
      <van-grid-item icon="photo-o" text="优惠券" />
      <van-grid-item icon="photo-o" text="我的足迹"/>
      <van-grid-item icon="photo-o" text="我的收藏" @click="toCollect"/>
      <van-grid-item icon="photo-o" text="地址管理" />
      <van-grid-item icon="photo-o" text="联系客服" />
      <van-grid-item icon="photo-o" text="帮助中心" />
      <van-grid-item icon="photo-o" text="意见反馈" />
      <van-grid-item />
    </van-grid>
  </div>
</template>

<script>
export default {
    data() {
        return {
            user:JSON.parse(localStorage.getItem("userInfo"))
        }
    },
    methods:{
        toCollect(){
            this.$router.push({path:"/mine/collect"})
        }
    },

};
</script>

<style lang="scss" scoped>
.header{
    width: 375px;
    height: 140px;
    background-color: rgb(51, 51, 51);
    display: flex;
    .img{
        margin: 32px 14px;
        height: 76px;
        width: 76px;
        border-radius: 50%;
    }
    .user-name{
        display: block;
        font-size: 17px;
        padding-top: 46px;
        color: lemonchiffon;
    }
}
</style>